<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <ul id="bands"></ul>

    <script>
        const bands = [
            'The Plot in You',
            'The Devil Wears Prada',
            'Prierce Plot in You',
            'Norma Plot in You',
            'The Bled',
            'Say Plot in You',
            'The Midway Plot in You',
            'We Midway Plot in You',
            'Oh, Sleeper',
            'A Skylit Plot in You',
            'An Old Dog',
        ]

        // 替换每个元素的A An The为空格
        function strip(bandName) {
            return bandName.replace(/^(a |an |the )/i,'');
        }

        // 字母从小到大排序
        const sortedBands = bands.sort(function(a,b) {
            if(strip(a) > strip(b)) {
                return 1
            } else return -1
        })

        const BandsList = document.querySelector('#bands')
        BandsList.innerHTML = sortedBands.map(band => {
            return `<li>${band}</li>`
        }).join('')
        
    </script>
</body>
</html>